<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head th:replace="layouts/default :: head(~{this :: title}, ~{this :: link},~{this :: _})">
    <link th:href="@{/modules/mobile/css/mobile.css}"  rel="stylesheet"/>
</head>
<body class="d-flex flex-column min-vh-100">
	<div class="flex-grow-1 container mt-3 mb-5">
		<div class="row row-cols-1 row-cols-md-2 g-4">
            <div class="col" th:each="product : ${products}">
                <div class="card h-100">
                    <img th:src="@{${product.imageUrl}}" 
                         class="card-img-top" 
                         alt="产品图片" 
                         style="height: 180px; object-fit: cover;">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${product.title}"></h5>
                        <p class="card-text text-truncate" th:text="${product.description}"></p>
                        <a th:href="@{/products/{id}(id=${product.id})}" 
                           class="btn btn-primary w-100">
                           查看详情
                        </a>
                    </div>
                </div>
            </div>
        </div>
	</div>
	<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
	<script th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/modules/mobile/js/mobile.js}"></script>
</body>

<footer th:replace="layouts/default::footer"></footer>
</html>